<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>地区</title>
    <style>
      #app {
        position: relative;
      }
      h1 {
        position: absolute;
        top: 42px;
        width: 800px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1 id="title"></h1>
    <div id="app"></div>
    <script src="https://d3js.org/d3-hierarchy.v1.min.js"></script>
    <script>
      const app = document.getElementById("app");
      const dataSource =
        "https://s5.ssl.qhres2.com/static/b0695e2dd30daa64.json";

      function draw(parentNode, props, tags = "circle") {
        const element = document.createElementNS(
          "http://www.w3.org/2000/svg",
          tags
        );
        for (const key in props) {
          element.setAttribute(key, props[key]);
        }
        parentNode.appendChild(element);
        return element;
      }

      function drawData(data, parentNode) {
        const fillStyle = "rgba(0, 0, 0, 0.2)",
          textColor = "white";
        const {
          children,
          r,
          x,
          y,
          data: { name },
        } = data;
        // 画一个圆
        const circle = draw(parentNode, {
          "data-name": name,
          cx: x,
          cy: y,
          r,
          fill: fillStyle,
        });

        // 如果有子集
        if (children) {
          // 先画一个group，然后在进行绘制
          const group = draw(parentNode, { fill: fillStyle,"data-name": name, }, "g");
          children.forEach((value) => drawData(value, group));
        } else {
          // 设置文案
          const text = draw(
            parentNode,
            {
              fill: textColor,
              "font-family": "Arial",
              "font-size": "1.5rem",
              "text-anchor": "middle",
              x,
              y,
            },
            "text"
          );
          text.textContent = name;
        }
      }

      function getTitle(target) {
        const name = target.getAttribute("data-name");
        if (target.parentNode && target.parentNode.nodeName === "g") {
          const parentName = target.parentNode.getAttribute("data-name");
          return `${parentName}-${name}`;
        }
        return name;
      }

      (async function () {
        const data = await (await fetch(dataSource)).json();

        const regions = d3
          .hierarchy(data)
          .sum((d) => 1)
          .sort((a, b) => b.value - a.value);

        const pack = d3.pack().size([1600, 1600]).padding(3);

        const root = pack(regions);
        const svgRoot = draw(
          app,
          { width: "800", height: "800", viewBox: "0 0 1600 1600" },
          "svg"
        );
        drawData(root, svgRoot);


        const titleEl = document.getElementById('title');
        let activeTarget = null;
        svgRoot.addEventListener("mousemove", (evt) => {
          let target = evt.target;
          if (target.nodeName === "text") target = target.previousSibling;
          if (activeTarget !== target) {
            if (activeTarget)
              activeTarget.setAttribute("fill", "rgba(0, 0, 0, 0.2)");
          }
          target.setAttribute("fill", "rgba(0, 128, 0, 0.1)");
          titleEl.textContent = getTitle(target);
          activeTarget = target;
        });
      })();
    </script>
  </body>
</html>
